<template>
    <div class="business_add">
			<div class="title">
				<span class="left">创建业务类型</span>
				<el-button class="add" type="primary" size="small" icon="el-icon-back" @click="$router.back(-1)">返回
				</el-button>
			</div>
      <!-- <titleDiv
				style="line-height: 50px;"
        :title="title"
        :isShow="true"
      ></titleDiv> -->
      <div class="main">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="主业务名称" style="position: relative;">
            <el-input v-model="form.name" placeholder="如：个人工商局商户业务"></el-input>
						<el-tooltip class="item" effect="dark"  placement="bottom">
							<div slot="content" style="line-height: 1.8;padding: 10px;">
								<h4 style="font-size: 16px;">业务类型添加说明</h4>
								<p>在添加业务类型时，以添加主业务为主，<br>主业务类型添加后，可根据实际网点办理<br>业务情况，进行添加子业务（主业务的附<br>属业务/细分业务）</p>
							</div>
							<i class="el-icon-info" style="font-size: 18px;position: absolute;top: 10px;right:-30px;z-index: 999;"></i>
						</el-tooltip> 
						<!-- <el-popover
							style="position: absolute;top: 2px;right:-30px;"
							placement="bottom"
							title="业务类型添加说明"
							width="300"
							trigger="click"
							content="在添加业务类型时，以添加主业务为主，主业务类型添加后，可根据实际网点办理业务情况，进行添加子业务（主业务的附属业务/细分业务）">
							<i class="el-icon-info" slot="reference" style="font-size: 18px;"></i>
						</el-popover> -->
          </el-form-item>
          <el-form-item label="业务描述">
            <el-input maxlength="500" v-model="form.describe" class="textArea" type="textarea" placeholder="业务描述，子业务类型以及办理业务所需材料。"></el-input>
          </el-form-item>
          <el-button class="btn" type="primary" @click="addType">提交</el-button>
        </el-form>
      </div>
    </div>
</template>
<script>
  // import titleDiv from './view/titleDiv.vue'
	import {addBusiness} from '../api/getData.js'
  export default {
    name: 'business_add',
    data: function () {
      return {
				form:{
					name:'',
					describe:''
				},
        title:"创建业务类型",
        name:'',
        time:''
      }
    },
    components:{
      // titleDiv
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
			addType(){
				addBusiness({
					businessName:this.form.name,
					businessDescription:this.form.describe
				}).then((res) =>{
					if(res.data.code == 1){
						this.$message({
							message: res.data.msg,
							type: 'warning'
						});
					}else if(res.data.code == 0){
						this.$message({
							message: '添加成功',
							type: 'success'
						})
						setTimeout(()=>{
							this.$router.push('/business/businessindex')
						},1000)
					}else{
						this.$message.error(res.data.msg);
					}
				}).catch((error) =>{
					console.log(error)
				})
			}
		} // 函数
  }
</script>
<style lang='scss'>
	/* .el-popover{
		background: #303133!important;
		color: #fff;
		.el-popover__title{
			color: #fff;
		}
	} */
	/* .el-popper[x-placement^=bottom] .popper__arrow::after{
		border-bottom-color:#303133;
	} */
	.business_add {
		 box-sizing: border-box;
		 
		 .title{
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 height: 64px;
			 line-height: 64px;
			 background: #fff;
			 overflow: hidden;
			 text-align: left;
			 padding:0 20px;
			 color: #333437;
			 font-size: 16px;
		 }
		.main{
			background: #fff;
			width: 100%;
			margin-top: 3%;
			padding: 5% 20%;
			.textArea{
				textarea{
					min-height: 240px!important;
				}
			
			}
			.el-form-item__label{
				font-weight: bold;
			}
			.btn{
				width: 120px;
				height:32px;
				line-height: 1px;
				margin-left: 80px;
			}
		}
	}
</style>
